import React, { Component } from 'react'
import { connect } from 'react-redux'
import { createContainer } from 'utils/hoc'
import { Tabs } from 'antd'
import CustomTable from 'components/common/table'
import RelatedCom from './com/relatedCom'
import PropTypes from 'prop-types'

import Style from './details.css'

const { TabPane } = Tabs
class details extends Component {
  static propTypes = {
    match: PropTypes.any,
    getSceneDetail: PropTypes.func,
    details: PropTypes.any,
    getLogList: PropTypes.func,
    logData: PropTypes.any
  }
  constructor (props) {
    super(props)
    this.state = {
      activeTab: '1',
      pageNo: 1,
      pageSize: 20
    }
    this.tabChange = this.tabChange.bind(this)
    this.onPageChange = this.onPageChange.bind(this)
    this.onShowSizeChange = this.onShowSizeChange.bind(this)
  }

  tabChange (value) {
    const { id } = this.props.match.params
    const { pageSize, pageNo } = this.state
    this.setState({
      activeTab: value
    })
    if (value === '1') {
      this.props.getSceneDetail({
        sceneId: id
      })
    } else {
      this.props.getLogList({
        sceneId: id,
        pageSize,
        pageNo
      })
    }
  }

  onPageChange (pageNo, pageSize) {
    const { id } = this.props.match.params
    this.setState({
      pageNo
    })
    this.props.getLogList({
      sceneId: id,
      pageSize,
      pageNo
    })
  }

  onShowSizeChange (current, pageSize) {
    const { id } = this.props.match.params
    this.setState({
      pageSize
    })
    const { pageNo } = this.state
    this.props.getLogList({
      sceneId: id,
      pageSize,
      pageNo
    })
  }

  getTableCols () {
    return [
      {
        title: '序号',
        dataIndex: 'id',
        key: 'id',
        width: 100,
        sorter: (a, b) => a.id - b.id
      },
      {
        title: '操作者',
        dataIndex: 'operatorName',
        key: 'operatorName',
        width: 100
      },
      {
        title: '操作日期',
        dataIndex: 'operatorTime',
        key: 'operatorTime',
        width: 100,
        sorter: (a, b) => a.operatorTime - b.operatorTime
      },
      {
        title: '操作记录',
        dataIndex: 'operatorRecord',
        key: 'operatorRecord',
        width: 100
      }
    ]
  }
  componentDidMount () {
    const { id } = this.props.match.params
    this.props.getSceneDetail({
      sceneId: id
    })
  }

  render () {
    const { details, logData } = this.props
    const { pageNo, activeTab, pageSize } = this.state
    const pagination = {
      showSizeChanger: true,
      current: pageNo,
      total: logData && logData.total,
      onChange: this.onPageChange,
      pageSize,
      onShowSizeChange: this.onShowSizeChange
    }
    return (
      <>
        <div className={Style['scenes-details']}>
          <div className={Style['tab-container']}>
            <Tabs defaultActiveKey={activeTab} onChange={this.tabChange} tabBarGutter={40} tabBarStyle={{ margin: '0px' }}>
              <TabPane tab='场景热区' key='1'>
                <div className={Style['tab-pane-container']}>
                  <div className={Style['content']}>
                    <RelatedCom details={details} image={details && details.image} type='view' />
                  </div>
                </div>
              </TabPane>
              <TabPane tab='场景日志' key='2'>
                <div className={Style['tab-pane-container']}>
                  <div className={Style['content']}>
                    <span className={Style['title']}>
                      数据列表
                    </span>
                    <CustomTable loading={!logData} columns={this.getTableCols()} dataSource={(logData && logData.logList) || []} pagination={pagination} />
                  </div>
                </div>
              </TabPane>
            </Tabs>
          </div>

        </div>
      </>
    )
  }
}

const mapState = state => ({
  details: state.scene.details,
  logData: state.scene.logData
})
const mapDispatch = dispatch => ({
  getSceneDetail: dispatch.scene.getSceneDetail,
  getLogList: dispatch.scene.getLogList
})

export default createContainer(
  connect(
    mapState,
    mapDispatch
  )(details)
)
